'use client';

import AnimatedSection from '../components/AnimatedSection';


// 添加一些自定义样式来确保动画效果
const styles = {
  animatedCard: `
    transform transition-all duration-500 hover:scale-105
    hover:shadow-xl cursor-pointer
  `,
  animatedButton: `
    transform transition-all duration-300 hover:scale-105
    active:scale-95
  `,
};

export default function ManusClientPage() {

  return (
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <section className="py-20 px-4 md:px-8 max-w-7xl mx-auto">
        <AnimatedSection animation="fadeInUp">
          <h1 className="text-5xl md:text-6xl font-bold mb-6 text-center">
            Leave it to Manus
          </h1>
          <p className="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto text-center mb-12">
            Manus is a general AI agent that bridges minds and actions: it doesn&apos;t just think, it delivers results. Manus excels at various tasks in work and life, getting everything done while you rest.
          </p>
          <div className="flex justify-center gap-4">
            <button className={`bg-primary text-white px-8 py-3 rounded-lg font-medium hover:bg-opacity-90 transition animate-slide-up ${styles.animatedButton}`}>
              Try Manus
            </button>
            <button className={`border border-gray-300 px-8 py-3 rounded-lg font-medium hover:bg-gray-50 transition animate-slide-up delay-100 ${styles.animatedButton}`}>
              Learn More
            </button>
          </div>
        </AnimatedSection>
      </section>

      {/* Use Cases Section */}
      <section className="py-16 px-4 md:px-8 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <AnimatedSection delay={200} animation="fadeInUp">
            <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">
              Use case gallery
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto text-center mb-16">
              Learn how Manus handles real-world tasks through step-by-step replays.
            </p>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* Card 1 */}
            <AnimatedSection delay={300} animation="fadeInUp">
              <div className={`bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition ${styles.animatedCard}`}>
                <div className="h-48 bg-blue-100 flex items-center justify-center">
                  <span className="text-5xl">✈️</span>
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-2">Trip to Japan in April</h3>
                  <p className="text-gray-600">
                    Manus integrates comprehensive travel information to create personalized itineraries and produces a custom travel handbook.
                  </p>
                </div>
              </div>
            </AnimatedSection>

            {/* Card 2 */}
            <AnimatedSection delay={400} animation="fadeInUp">
              <div className={`bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition ${styles.animatedCard}`}>
                <div className="h-48 bg-green-100 flex items-center justify-center">
                  <span className="text-5xl">📈</span>
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-2">Deeply Analyze Tesla Stocks</h3>
                  <p className="text-gray-600">
                    Manus delivers in-depth stock analysis with visually compelling dashboards that showcase comprehensive insights.
                  </p>
                </div>
              </div>
            </AnimatedSection>

            {/* Card 3 */}
            <AnimatedSection animation="fadeInUp" delay={500}>
              <div className={`bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition ${styles.animatedCard}`}>
                <div className="h-48 bg-yellow-100 flex items-center justify-center">
                  <span className="text-5xl">🎓</span>
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-2">Interactive Course on the Momentum Theorem</h3>
                  <p className="text-gray-600">
                    Manus develops engaging video presentations for middle school educators, clearly explaining the momentum theorem.
                  </p>
                </div>
              </div>
            </AnimatedSection>
          </div>

          <AnimatedSection delay={600} className="mt-12 text-center" animation="fadeInUp">
            <button className={`border border-gray-300 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition ${styles.animatedButton}`}>
              Explore more use cases
            </button>
          </AnimatedSection>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-20 px-4 md:px-8">
        <div className="max-w-7xl mx-auto">
          <AnimatedSection delay={200} animation="fadeInUp">
            <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">
              See how others use Manus
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto text-center mb-16">
              Got a task? Let Manus take care of it! Submit yours and see the best results featured here.
            </p>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Testimonial 1 */}
            <AnimatedSection delay={300} animation="fadeInUp">
              <div className="bg-gray-50 p-6 rounded-xl hover:shadow-md transition">
                <h3 className="font-semibold text-lg mb-2">Best Books on Media and Linguistics in France 2019-2025</h3>
                <p className="text-gray-600">Please help me to create a table of the best books about medias and linguistics (separated topics) published in France between 2019 and 2025. With a summary of why they are the best.</p>
                <p className="text-gray-500 mt-4 text-sm">From jo****th@gmail.com</p>
              </div>
            </AnimatedSection>

            {/* Testimonial 2 */}
            <AnimatedSection delay={300} animation="fadeInUp">
              <div className="bg-gray-50 p-6 rounded-xl hover:shadow-md transition">
                <h3 className="font-semibold text-lg mb-2">Largest Real Estate Brokerages in Major Metro Areas</h3>
                <p className="text-gray-600">Find the largest real estate brokerages in each of the top 10 major metro areas and break them down by number of agents, total number of transactions, total revenue, average commission per side.</p>
                <p className="text-gray-500 mt-4 text-sm">From wa****ch@gmail.com</p>
              </div>
            </AnimatedSection>
          </div>

          <AnimatedSection delay={7000} className="mt-12 text-center" animation="fadeInUp">
            <button className={`border border-gray-300 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition ${styles.animatedButton}`}>
              Explore more submissions
            </button>
          </AnimatedSection>
        </div>
      </section>

      {/* Benchmarks Section */}
      <section className="py-20 px-4 md:px-8 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <AnimatedSection delay={200} animation="fadeInUp">
            <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">
              Benchmarks
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto text-center mb-16">
              GAIA is a benchmark for evaluating General AI Assistants on solving real-world problems. Manus has achieved new state-of-the-art (SOTA) performance across all three difficulty levels.
            </p>
          </AnimatedSection>

          <AnimatedSection delay={300} animation="fadeInUp">
            <div className="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
              <div className="flex flex-col md:flex-row justify-between items-center gap-8">
                <div className="text-center md:text-left">
                  <h3 className="text-2xl font-bold mb-2">Level 1</h3>
                  <p className="text-5xl font-bold text-primary">92%</p>
                  <p className="text-gray-500 mt-2">Manus Performance</p>
                </div>
                <div className="text-center">
                  <h3 className="text-2xl font-bold mb-2">Level 2</h3>
                  <p className="text-5xl font-bold text-primary">87%</p>
                  <p className="text-gray-500 mt-2">Manus Performance</p>
                </div>
                <div className="text-center md:text-right">
                  <h3 className="text-2xl font-bold mb-2">Level 3</h3>
                  <p className="text-5xl font-bold text-primary">79%</p>
                  <p className="text-gray-500 mt-2">Manus Performance</p>
                </div>
              </div>
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 md:px-8 bg-gray-900 text-white">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-8 md:mb-0">
              <h2 className="text-2xl font-bold mb-2">Manus</h2>
              <p className="text-gray-400">
                Manus, derived from the Latin word for &ldquo;hand&rdquo;, is a general AI agent that turns your thoughts into actions.
              </p>
            </div>
            <div className="flex gap-8">
              <div>
                <h3 className="font-semibold mb-4">Company</h3>
                <ul className="space-y-2">
                  <li><a href="#" className="text-gray-400 hover:text-white transition">Feedback</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-white transition">Media inquiries</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-white transition">Contact us</a></li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold mb-4">Resources</h3>
                <ul className="space-y-2">
                  <li><a href="#" className="text-gray-400 hover:text-white transition">Privacy policy</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-white transition">Terms of service</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div className="mt-12 pt-8 border-t border-gray-800 text-center md:text-left">
            <p className="text-gray-400">© 2025 Manus AI</p>
          </div>
        </div>
      </footer>
    </div>
  );
} 